/* Copyright Tvb Network (Pty) Ltd. All rights reserved  2023 */
/* this is the style module for the app and services */
/* services & tech module named _techserv_mod_.css*/

:root{
	--_msetBox_BGColor:rgba(22, 22, 23, 0.92);
}





/* Define CSS variables for light mode */
[data-theme="light"] {
	
	--_msetBox_BGColor:rgba(22, 22, 23, 0.92);
}


/* Dark mode variables */
[data-theme="dark"] {
	--_msetBox_BGColor:#2B4F62;
}


/* this will contain the settings on top of the box */
._msetBox_{
	width:40%;
	height:auto;
	min-width:380px;
	position:fixed;
	right:1px;
	top:5px;
	border-radius:5px;
	box-shadow:0 0 15px #00000080;
	transition:0.3s ease-in-out;
	opacity:0;
	visibility:hidden;
	color:#d1d1d1;
	overflow-y:auto;
	background-color:var(--_msetBox_BGColor);
	backdrop-filter: blur(100px);  /* Apply blur */
    -webkit-backdrop-filter: blur(100px);  /* Safari support */
}




/* this is the line inside the box settings */
.lnInSet{
	padding:5px;
	cursor:pointer;
	font-size:12pt;
	font-family:var(--TvbSUISBold),UISBold,sans-serif;
}





/* this is for the account section */
.lnInSetAcc{
	padding:10px;
	cursor:pointer;
	font-size:12pt;
	font-family:var(--TvbSUISBold),UISBold,sans-serif;
	background-color:var(--TvbFxBlack);
	display:flex;
	align-items:center;
}



/* user icon */
._icoUsPrm_{
	width:26px;
	height:26px;
	display:inline-block;
}

._icoUsPrmTxt_{
	width:auto;
	display:inline-block;
	cursor:pointer;
	font-size:12pt;
	padding-left:10px;
	font-family:var(--TvbSUISBold),UISBold,sans-serif;
}



._ttonMnTech_{
	padding:5px;
	cursor:pointer;
	font-size:12pt;
	font-family:var(--TvbSUISBold),UISBold,sans-serif;
	display:inline-block;
}


/* this will content the close button */
._clsOnMn_{
	position:absolute;
	top:10px;
	right:10px;
	height:25px;
	width:25px;
	cursor:pointer;
	outline:none;
}



/*----------------here we have to set up setting param---------------------*/
._lnOnVserv_{
	width:98%;
	padding:1%;
	background-color:#00000040;
	margin-top:1px;
	cursor:pointer;
	display:flex;
	justify-content:center;
}


/* this is the icon */
._icon_mnv_{
	width:34px;
	height:34px;
	display:inline-block;
	vertical-align:-8px;
}

/* This will contain the text of the services */
._ttonMn_{
	width:calc(100% - 88px);
	padding-top:5px;
	height:35px;
	display:inline-block;
	font-family:var(--TvbSUIBlack),UISBlack,sans-serif;
	padding-left:8px;
	font-size:14pt;
	color:#d1d1d1bb;
}


._go_tIn_{
	width:26px;
	margin:5px;
	display:inline-block;
}




/*-----------------tablet style------------*/
@media screen and (max-width: 769px) {
	/* here we have to adapte the box settings to the size of the mobile device*/
	._msetBox_{
		width:60%;
		min-width:300px;
		height:auto;
		top:0px;
		right:0px;
		background-color:var(--blackColor_1);
		box-shadow:0 0 0 500px #000000aa;
		border:2px solid #444;
	}
	
}





/*-------------mobile style-------------*/
@media screen and (max-width: 480px) {
	._go_tIn_{
		opacity:0.7;
	}
	
	
	
	/* this is for the account section */
	.lnInSetAcc{
		padding:7px;
	}
	
	
	/* user icon */
	._icoUsPrm_{
		width:22px;
		height:22px;
		margin:5px;
		display:inline-block;
	}


	/* here we have to adapte the box settings to the size of the mobile device*/
	._msetBox_{
		width:80%;
		min-width:330px;
		min-height:600px;
		height:auto;
		top:0px;
		right:0px;
		background-color:var(--blackColor_1);
		box-shadow:0 0 0 500px #000000aa;
		border:2px solid #444;
		overflow-y:auto;
		
	}
	
	
	._msetBox_::-webkit-scrollbar {
		height:0px;
		width:0px;
	}

	/* this is the icon */
	._icon_mnv_{
		width:26px;
		height:26px;
		margin:3px;
	}
	
	/* This will contain the text of the services */
	._ttonMn_{
		font-size:12pt;
	}
	
	
	._go_tIn_{
		width:24px;
		margin:8px;
		display:inline-block;
	}




	
	/* this will content the close button */
	._clsOnMn_{
		position:absolute;
		top:0px;
		right:0px;
		height:20px;
		width:20px;
		margin:14px;
		cursor:pointer;
		outline:none;
	}
	

}









/* Styles for Galaxy Fold in landscape mode */
@media screen and (min-width: 280px) and (max-width: 320px) and (max-height: 600px) and (orientation: landscape) {
  /* Your styles for Galaxy Fold in landscape mode go here */
}

/* Styles for Galaxy Fold in portrait mode */
@media screen and (min-width: 280px) and (max-width: 320px) and (min-height: 601px) and (orientation: portrait) {
	/* Your styles for Galaxy Fold in portrait mode go here */
  	.lnInSet{
		height:30px;
	}
	._msetBox_{
		min-width:250px;
		width:250px;
	}
	
	/* This will contain the text of the services */
	._ttonMn_{
		font-size:12pt;
	}
	
	/* this is the icon */
	._icon_mnv_{
		width:30px;
		height:30px;
	}
	
	
	/* this will content the close button */
	._clsOnMn_{
		height:20px;
		width:20px;
	}
	
	._icoUsPrm_{
		height:20px;
		width:20px;
	}
}